/*
 * 音频
 */

import * as React from 'react';

import { Spin } from 'antd';
import AudioPlayer from 'components/common/AudioPlayer';
import Selector from './Selector';
import makeHoc from 'components/common/makeHoc';

import { isLoading } from 'utils/utils';
import ACTIONS from 'constants/attachment';

const serviceType = 1;

interface AudioProps {
  dispatch: (action: any) => any;
  handleFetchAttachList: (data: Record<string, any>) => any;
  handleCheckChange: () => any;
  loadingGroup: any;
  attachList: object[];
  selectedItems: any[];
  doSelect?: boolean;
  selectMax?: number;
}

class Audio extends React.Component<AudioProps> {
  static defaultProps: AudioProps = {
    dispatch: () => {},
    handleFetchAttachList: () => {},
    handleCheckChange: () => {},
    loadingGroup: {},
    attachList: [],
    selectedItems: [],
    doSelect: false,
    selectMax: 0,
  };

  handleFetchAudioList = () => {
    this.props.handleFetchAttachList({ type: serviceType });
  };

  render() {
    const {
      loadingGroup,
      attachList,
      selectedItems,
      doSelect,
      selectMax,
      handleCheckChange,
    } = this.props;

    return (
      <Spin spinning={isLoading(loadingGroup, ACTIONS.FETCH_ATTACHMENT_LIST)} tip="Loading...">
        {attachList.length > 0 ? (
          <ul className="asset-gallery" style={{ listStyle: 'none', margin: 4, padding: 0 }}>
            {attachList.map((audio: any) => {
              return (
                <li
                  key={audio.id}
                  className="gallery-item"
                  style={{
                    float: 'left',
                    background: 'white',
                    marginRight: 16,
                    marginBottom: 16,
                    border: '1px solid #e7e7eb',
                    width: 208,
                  }}>
                  <div
                    className="gallery-item-preview"
                    tabIndex={0}
                    style={{
                      verticalAlign: 'top',
                    }}>
                    <AudioPlayer isTiny={false} audioUri={audio.uri} />
                    <Selector
                      handleCallback={this.handleFetchAudioList}
                      onChange={handleCheckChange}
                      selectedItems={selectedItems}
                      item={audio}
                      isCheck={!!doSelect}
                      selectMax={selectMax}
                    />
                  </div>
                </li>
              );
            })}
          </ul>
        ) : (
          <p className="loading-placeholder">还没有音频</p>
        )}
        <div className="clear-both" />
      </Spin>
    );
  }
}

function mapStateToProps(state: any) {
  const { loadingGroup } = state;
  const { attachList, selectedItems } = state.attachment;

  return {
    loadingGroup,
    attachList,
    selectedItems,
  };
}

export default makeHoc(mapStateToProps)(Audio, {
  fetchAudioList(filter: any = {}) {
    this.handleFetchAudioList(filter, true);
  },
});
